<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛--帖子列表</TITLE>

<Link rel="stylesheet" type="text/css" href="style/style.css" />
</HEAD>

<BODY>

<div id="app">

<DIV>
	<IMG src="image/logo.gif">
</DIV>


	<!--      用户信息、登录、注册        -->
<DIV class="h" id="logindiv">
	<span v-if="loginStatus == 1">
		<input type="hidden" value="yes" />
		欢迎您 <a href="#">{{userInfo.uname}}</a>
		<a href="javascript:void(0)" @click="signout()">退出</a>
	</span>
	<span v-if="loginStatus == 0">
		<input type="hidden" value="no" />
		您尚未&nbsp;<a href="login.html">登录</a>
		&nbsp;|&nbsp;<A href="reg.html">注册</A> |
	</span>
</DIV>


<!--      主体        -->
<DIV>
<!--      导航        -->
<br/>
<DIV>
	&gt;&gt;<B><a href="index.html">论坛首页</a></B>&gt;&gt;
	<B><a href="javascript:void(0);">{{boardInfo.boardname}}</a></B>
</DIV>
<br/>
<!--      新帖        -->
	<DIV>
		<span v-if="loginStatus == 1">
			<A href="javascript:void(0);" @click="post()"><IMG src="image/post.gif" name="td_post" border="0" id=td_post></A>
		</span>
	</DIV>
<!--         翻 页         -->
	<DIV>
		<a href="list.html">上一页</a>|
		<a href="list.html">下一页</a>
	</DIV>

	<DIV class="t">
		<TABLE cellSpacing="0" cellPadding="0" width="100%">		
			<TR>
				<TH class="h" style="WIDTH: 100%" colSpan="4"><SPAN>&nbsp;</SPAN></TH>
			</TR>
            <!-- 表 头 -->
			<TR class="tr2">
				<TD>&nbsp;</TD>
				<TD style="WIDTH: 80%" align="center">文章</TD>
<!--				<TD style="WIDTH: 10%" align="center">浏览数</TD>-->
				<TD style="WIDTH: 10%" align="center">作者</TD>
				<TD style="WIDTH: 10%" align="center">回复</TD>
			</TR>
        	<!-- 主 题 列 表 -->
			<TR class="tr3" v-for="(item, index) in topicData">
				<TD><IMG src="image/topic.gif" border=0></TD>
				<TD style="FONT-SIZE: 15px">
					<A href="javascript:void(0);" @click="openDetailHtml(item.topicid)">{{item.title}}</A>
				</TD>>
				<TD align="center">{{item.uname}}</TD>
				<TD align="center" v-if="item.total != null">{{item.total}}</TD>
				<TD align="center" v-else>暂无回复</TD>
			</TR>

		</TABLE>
	</DIV>
	<!-- 翻 页 -->
	<DIV style="background-color: #ffffff; color:#ff0000;">
		<a @click.prevent="clickPage(1)">第一页</a>
		<a @click.prevent="clickPage( pagebean.pre)"  :page-data="pagebean.pre">上一页</a>
		<a @click.prevent="clickPage( pagebean.next)" :page-data="pagebean.next">下一页</a>
		<a @click.prevent="clickPage( pagebean.totalpages)" :page-data="pagebean.totalpages">最后一页</a>
		总共{{pagebean.total}}记录/共分{{pagebean.totalpages}}页，
		每页{{pagebean.pagesize}}条，当前第{{pagebean.pageno}}页
	</DIV>
</DIV>
<!--             声 明          -->
<BR/>
<CENTER class="gray">源辰信息</CENTER>

</div>

</BODY>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">

	// 使用axios时，利用原型模式给axios加入 Authorization头，这样每个请求会加入Authorization头部
	Vue.prototype.axios = axios;
	// 在每次请求时，前端携带token到请求头中
	axios.interceptors.request.use(config => {
		// 从localStorage 或 vuex 中获取 token
		const token = localStorage.getItem("token");
		// 如果有 token 就添加到请求头中
		if (token){
			config.headers.Authorization = token;
		} else {
			config.headers.Authorization = "";
		}
		console.log(token);
		console.log(config);
		return config;
	}, error => {
		return Promise.reject(error);
	});


	var index_app = new Vue({
		el: "#app",
		data: {
			topicData: [], // list.html页中某个板块的分页的帖子列表
			loginStatus: 0, // 登陆状态
			userInfo: {}, // 用户信息
			boardInfo: {}, // 板块信息
			look: 0,
			// 分页用的是 model
			pagebean: {
				pageno: 1,
				pagesize: 2,
				sortby: "topicid",
				sort: "asc",

				total: 0,
				totalpages: 0,
				pre: 1,
				next: 1
			}
		},
		methods: {

			post(){
				// 确定 type=0，这代表这是一个发表话题
				sessionStorage.setItem("type", 0);
				window.open("post.html", "_self");
			},
			openDetailHtml(topicid){
				let _this = this;
				if (_this.userInfo.uid == null){
					_this.userInfo.uid = 1;
				}
				// 点赞 type = zan
				// 浏览 type = look
				// 收藏 type = collect
				// 增加浏览数
				let type = "look";
				let promise =
						axios.get("/bbs-count/count/zanTopic?type=" + type +
								"&uid=" + _this.userInfo.uid +
								"&topicid=" + topicid);

				promise.then( result => {
					this.look = result.data.num;
					// sessionStorage.setItem("lookNum", this.look);
					sessionStorage.setItem("topicInfo", JSON.stringify({"topicid": topicid, "lookNum": this.look})); // "title", title
					// detail.html显示帖子的详情 及这个帖子的回复分页列表
					window.open("detail.html", "_self");
				});
			},
			displayPage(data){
				// vue是一个MVVM模型     VM指的是view model

				var _this = this;
				// data 是一个对象，它下面有data属性，这个属性中的数据才是服务端回送的 json
				let result = data.data;
				if (result.code === 0){
					alert("暂无数据！");
					return;
				}
				_this.topicData = result.dataset;
				_this.pagebean = result;
			},
			clickPage(pageno){
				var _this = this;
				_this.boardInfo = JSON.parse(sessionStorage.getItem("boardInfo"));
				// axios.get()/axios.post() 返回的是 Promise对象
				var promise =
						axios.get("/bbs-board/topic/findByPage?pageno=" + pageno +
								"&pagesize=" + _this.pagebean.pagesize +
								"&boardid=" + _this.boardInfo.boardid);

				promise.then( result => {
					_this.displayPage(result.data);
				});
			},
			signout(){
				var _this = this;
				if (localStorage.getItem("token") == null){
					// 本地没有token，则说明用户没有登录
					_this.userInfo = {};
					_this.loginStatus = 0;
					return;
				}
				//
				axios.get("/bbs-security/user/signout").then(data => {
					_this.userInfo = {};
					_this.loginStatus = 0;
					localStorage.removeItem("token");
				});
			},
			isOnLine(){
				var _this = this;
				// 如果浏览器的storage中无token，则说明 没有用户登录
				if (localStorage.getItem("token") == null){
					_this.userInfo = {};
					_this.loginStatus = 0;
					return;
				}
				axios.get("/bbs-security/user/loginCheck").then(data=>{
					if (data.data.code === 0){
						_this.loginStatus = 0;
					} else {
						_this.loginStatus = 1;
						_this.userInfo = data.data.data;
					}
				});
			}
		},

		// 页面的挂载
		mounted:function (){
			// 组合多个请求
			axios.all( [this.clickPage(1), this.isOnLine()] ).then(axios.spread(function (d1, d2){
			}));
		}
	});
</script>

</HTML>
